<template>
    <div class="wait-payment" :style='{height:clientHeight+"rem"}'>
        <empty-notice v-if="realData.length == 0"></empty-notice>
        <order-cards :content='realData' :btn='btnText' @cancelOrder='refresh'></order-cards>
    </div>
</template>

<script>
import virtualData from './virtual'
import orderCards from './orderCards'
import emptyNotice from './emptyNotice'

export default {
    name:'waitPayment',
    data(){
        return {
            virtual:null,
            btnText:'waitPayment',
            realData:[],
            clientHeight:0
        }
    },
    methods:{
        getWaitPayment(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.orderStatus+1, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.realData = res.data['msg'];
                    that.transferUrl(that.realData);
                    that.transferStatus(that.realData);
                    console.log(that.realData);
                }
            })
        },
        refresh(){
            this.getWaitPayment();
        }
    },
    mounted(){
        let scale = window.devicePixelRatio;
        let clientHeight = document.documentElement.clientHeight;
        this.clientHeight = clientHeight*scale/100;
        this.$store.state.tab = '待付款';
        this.getWaitPayment();
    },
    activated(){
        this.$store.state.tab = '待付款';
        this.getWaitPayment();
    },
    components:{
        orderCards,
        emptyNotice
    }
}
</script>

<style lang='less'>
@rem:100rem;

.wait-payment{
    width: 100%;
    margin-top: 90/@rem;
    margin-bottom: 10/@rem;
    overflow-y: scroll;
    padding-bottom: 30/@rem;
}
</style>
